<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="品牌名" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入品牌名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="首字母" prop="firstLetter">
        <el-input
          v-model="queryParams.firstLetter"
          placeholder="请输入检索首字母"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input
          v-model="queryParams.sort"
          placeholder="请输入排序"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['cloudmallproduct:brand:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['cloudmallproduct:brand:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['cloudmallproduct:brand:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['cloudmallproduct:brand:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="brandList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column type="index" label="序号" align="center" width="60">
        <template #default="{ $index }">
          {{ queryParams.pageNum * queryParams.pageSize - queryParams.pageSize + $index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="品牌名" align="center" prop="name" />
      <el-table-column
        prop="logo"
        header-align="center"
        align="center"
        label="品牌logo">
        <template slot-scope="scope">
          <img :src="scope.row.logo" style="width: 100px; height: 80px" />
        </template>
      </el-table-column>
      <el-table-column label="介绍" align="center" prop="descript" />
      <el-table-column label="是否显示" align="center" prop="showStatus">
         <!-- 作用域插槽，获取当前行数据 row -->
          <template #default="{ row }">
            <!-- 使用开关组件展示状态 -->
              <el-switch 
                v-model="row.showStatus" 
                :active-value="0" 
                :inactive-value="1" 
                active-color="#ff4949" 
                inactive-color="#13ce66"
                @change="handleStatusChange(row)"
              />
          </template>
      </el-table-column>
      <el-table-column label="检索首字母" align="center" prop="firstLetter" />
      <el-table-column label="排序" align="center" prop="sort" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-milk-tea"
            @click="openDrawer(scope.row)"
            v-hasPermi="['cloudmallproduct:brand:edit']"
          >关联分类</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['cloudmallproduct:brand:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['cloudmallproduct:brand:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 关联分类抽屉 -->
      <el-drawer
        title="关联分类"
        :visible.sync="drawer"
        :direction="direction"
        size="50%"
        :before-close="handleClose">
        <div class="drawer-container" style="margin-left: 20px; margin-right: 20px;">
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                @click="handleDrawerAdd"
                v-hasPermi="['cloudmallproduct:categoryBrandRelation:add']"
              >新增</el-button>
            </el-col>
            <!-- 可根据需求添加其他操作按钮，如删除等 -->
          </el-row>
          <el-table :data="drawerCategoryList" border>
            <el-table-column prop="id" label="ID">
              <template #default="{ $index }">
                {{ queryParams.pageNum * queryParams.pageSize - queryParams.pageSize + $index + 1 }}
              </template>
            </el-table-column>
            <el-table-column prop="brandId" label="品牌ID" />
            <el-table-column prop="catelogId" label="分类ID" />
            <el-table-column prop="brandName" label="品牌名" />
            <el-table-column prop="catelogName" label="分类名" />
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleDrawerUpdate(scope.row)"
                  v-hasPermi="['cloudmallproduct:categoryBrandRelation:edit']"
                >修改</el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDrawerDelete(scope.row)"
                  v-hasPermi="['cloudmallproduct:categoryBrandRelation:remove']"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 抽屉内的新增/编辑表单 -->
          <el-dialog :title="drawerFormTitle" :visible.sync="drawerFormVisible" width="500px" append-to-body>
            <el-form ref="drawerForm" :model="drawerForm" :rules="drawerRules" label-width="80px">
              <el-form-item label="品牌ID" prop="brandId">
                <el-input v-model="drawerForm.brandId" placeholder="请输入品牌ID" />
              </el-form-item>
              <el-form-item label="分类ID" prop="catelogId">
                <el-input v-model="drawerForm.catelogId" placeholder="请输入分类ID" />
              </el-form-item>
              <!-- 其他需要的表单字段 -->
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="submitDrawerForm">确 定</el-button>
              <el-button @click="cancelDrawerForm">取 消</el-button>
            </div>
          </el-dialog>
        </div>
      </el-drawer>

    <!-- 添加或修改品牌对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="品牌名" prop="name">
          <el-input v-model="form.name" placeholder="请输入品牌名" />
        </el-form-item>

        <el-form-item label="logo地址" prop="logo">
          <single-upload v-model="form.logo"></single-upload>
        </el-form-item>

        <el-form-item label="介绍" prop="descript">
          <el-input v-model="form.descript" type="textarea" placeholder="请输入内容" />
        </el-form-item>

        <el-form-item label="显示状态" prop="showStatus">
            <!-- 使用开关组件展示状态 -->
              <el-switch 
                v-model="form.showStatus" 
                :active-value="0" 
                :inactive-value="1" 
                active-color="#ff4949" 
                inactive-color="#13ce66"
              />
        </el-form-item>

        <el-form-item label="首字母" prop="firstLetter">
          <el-input v-model="form.firstLetter" placeholder="请输入检索首字母" />
        </el-form-item>

        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="form.sort" placeholder="请输入排序" />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listBrand, getBrand, delBrand, addBrand, updateBrand, switchBrandStatus, getCatWithBrand } from "@/api/product/brand"
import singleUpload from '@/components/upload/singleUpload'

export default {
  name: "Brand",
  components: {
      singleUpload
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 品牌表格数据
      brandList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 关联分类抽屉
      drawer: false,
      direction: "rtl",
      // 抽屉内表格要展示的品牌关联分类数据
      drawerCategoryList: [], 
      drawerForm: {}, // 抽屉内新增/编辑表单数据
      drawerFormVisible: false, // 控制抽屉内新增/编辑表单的显示隐藏
      drawerFormTitle: "", // 抽屉内表单标题
      drawerRules: {
        catelogId: [
          { required: true, message: "分类ID不能为空", trigger: "blur" }
          // 可根据实际需求添加其他校验规则
        ],
        // 其他字段校验规则...
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        logo: null,
        descript: null,
        showStatus: null,
        firstLetter: null,
        sort: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        firstLetter: [
            {
              validator: (rule, value, callback) => {
                if (value === '') {
                  callback(new Error('首字母必须填写'))
                } else if (!/^[a-zA-Z]$/.test(value)) {
                  callback(new Error('首字母必须a-z或者A-Z之间'))
                } else {
                  callback()
                }
              },
              trigger: 'blur'
            }
          ],
          sort: [
            {
              validator: (rule, value, callback) => {
                if (value === '') {
                  callback(new Error('排序字段必须填写'))
                } else if (!Number.isInteger(value) || value < 0) {
                  callback(new Error('排序必须是一个大于等于0的整数'))
                } else {
                  callback()
                }
              },
              trigger: 'blur'
            }
          ]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 打开品牌关联
    openDrawer(row){
        // 显示
        this.drawer = true
        // 请求关联分类列表
        console.log("关联分类列表")
        getCatWithBrand({
          brandId: row.brandId,
          brandName: row.name
        }).then(res =>{
            console.log("关联分类列表", res)
            if(res.code === 200){
               this.drawerCategoryList = res.rows
            }
        }).catch(err =>{
               this.$modal.msgError("获取关联分类数据失败");
        })
        
    },
    // 关闭品牌关联
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    /** 查询品牌列表 */
    getList() {
      this.loading = true
      listBrand(this.queryParams).then(response => {
        this.brandList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        brandId: null,
        name: null,
        logo: null,
        descript: null,
        showStatus: null,
        firstLetter: null,
        sort: null
      }
      this.resetForm("form")
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm")
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.brandId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = "添加品牌"
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const brandId = row.brandId || this.ids
      getBrand(brandId).then(response => {
        this.form = response.data
        this.open = true
        this.title = "修改品牌"
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.brandId != null) {
            updateBrand(this.form).then(response => {
              this.$modal.msgSuccess("修改成功")
              this.open = false
              this.getList()
            })
          } else {
            addBrand(this.form).then(response => {
              this.$modal.msgSuccess("新增成功")
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const brandIds = row.brandId || this.ids
      this.$modal.confirm('是否确认删除品牌编号为"' + brandIds + '"的数据项？').then(function() {
        return delBrand(brandIds)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess("删除成功")
      }).catch(() => {})
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('cloudmallproduct/brand/export', {
        ...this.queryParams
      }, `brand_${new Date().getTime()}.xlsx`)
    },
    // 显示状态切换
    handleStatusChange(row){
      // 显示加载中状态
      this.loading = true
      // 调用更新状态的接口
      switchBrandStatus({
        brandId: row.brandId,
        showStatus: row.showStatus
      }).then(response => {
        this.$modal.msgSuccess("状态更新成功")
        this.loading = false
      }).catch(error => {
        // 发生错误时回滚状态
        row.showStatus = row.showStatus === '1' ? '0' : '1'
        this.loading = false
        this.$modal.msgError("状态更新失败")
      })
    },
    handleCatWithBrand(row){
       getCatWithBrand(row).then( res =>{

       }).catch( err =>{

       })
    },
     // 打开抽屉内新增表单
  handleDrawerAdd() {
    this.drawerForm = {};
    this.drawerFormTitle = "新增品牌分类关联";
    this.drawerFormVisible = true;
  },
  // 打开抽屉内编辑表单
  handleDrawerUpdate(row) {
    this.drawerForm = { ...row };
    this.drawerFormTitle = "修改品牌分类关联";
    this.drawerFormVisible = true;
  },
  // 提交抽屉内表单
  submitDrawerForm() {
    this.$refs["drawerForm"].validate(valid => {
      if (valid) {
        // 这里假设新增和修改调用的是同一个接口，根据是否有id判断是新增还是修改
        let requestFn;
        if (this.drawerForm.id) {
          requestFn = updateCategoryBrandRelation; // 假设的修改接口方法
        } else {
          requestFn = addCategoryBrandRelation; // 假设的新增接口方法
        }
        requestFn(this.drawerForm).then(response => {
          this.$modal.msgSuccess("操作成功");
          this.drawerFormVisible = false;
          // 重新获取数据，更新表格
          this.openDrawer({ brandId: this.drawerForm.brandId, name: this.drawerForm.brandName });
        }).catch(error => {
          this.$modal.msgError("操作失败");
        });
      }
    });
  },
  // 取消抽屉内表单
  cancelDrawerForm() {
    this.drawerFormVisible = false;
  },
  // 抽屉内删除操作
  handleDrawerDelete(row) {
    this.$modal.confirm('是否确认删除品牌分类关联编号为"' + row.id + '"的数据项？').then(function() {
      return delCategoryBrandRelation(row.id); // 假设的删除接口方法
    }).then(() => {
      this.$modal.msgSuccess("删除成功");
      // 重新获取数据，更新表格
      this.openDrawer({ brandId: row.brandId, name: row.brandName });
    }).catch(() => {});
  }
  }
}
</script>
